/**
 * 建筑渲染器
 * 负责渲染建筑列表和卡片
 */

import { UIRenderer } from './UIRenderer.js';

export class BuildingRenderer {
    /**
     * 渲染建筑列表
     * @param {Array} buildings - 建筑显示信息列表
     * @param {Function} onUpgrade - 升级回调
     * @param {Function} onUnlock - 解锁回调
     * @param {string} containerId - 容器ID
     */
    static renderBuildingList(buildings, onUpgrade, onUnlock, containerId = 'buildings-list') {
        const container = document.getElementById(containerId);
        if (!container) return;

        UIRenderer.clearContainer(container);

        // 过滤可见建筑
        const visibleBuildings = buildings.filter(b => b.unlocked || b.unlockCost);

        if (visibleBuildings.length === 0) {
            UIRenderer.showEmptyState(container, '暂无可用建筑', 'fa-building');
            return;
        }

        visibleBuildings.forEach(building => {
            const card = this.createBuildingCard(building, onUpgrade, onUnlock);
            container.appendChild(card);
        });
    }

    /**
     * 创建建筑卡片 - 现代化版本
     * @param {Object} building - 建筑信息
     * @param {Function} onUpgrade - 升级回调
     * @param {Function} onUnlock - 解锁回调
     * @returns {HTMLElement} 建筑卡片元素
     */
    static createBuildingCard(building, onUpgrade, onUnlock) {
        const card = document.createElement('div');
        card.className = 'building-card-modern';

        // 创建头部（图标 + 标题）
        const header = this.createBuildingHeader(building);
        card.appendChild(header);

        // 如果已解锁，显示效率
        if (building.unlocked) {
            const efficiency = this.createEfficiencyDisplay(building.efficiency);
            card.appendChild(efficiency);
        }

        // 显示成本
        const cost = building.unlocked ? building.upgradeCost : building.unlockCost;
        const costDisplay = this.createCostDisplayModern(cost);
        card.appendChild(costDisplay);

        // 创建操作按钮
        const button = this.createActionButton(building, onUpgrade, onUnlock);
        card.appendChild(button);

        UIRenderer.addFadeInAnimation(card);
        return card;
    }

    /**
     * 创建建筑头部 - 现代化版本
     * @param {Object} building - 建筑信息
     * @returns {HTMLElement} 头部元素
     */
    static createBuildingHeader(building) {
        const header = document.createElement('div');
        header.className = 'building-header';

        // 图标
        const iconDiv = document.createElement('div');
        iconDiv.className = 'building-icon-modern';
        iconDiv.innerHTML = `<i class="fa ${building.icon}"></i>`;

        // 信息
        const infoDiv = document.createElement('div');
        infoDiv.className = 'building-info';

        const title = document.createElement('h3');
        title.className = 'building-title';
        title.innerHTML = `${building.name}<span class="building-level-badge">Lv.${building.level}</span>`;

        const desc = document.createElement('p');
        desc.className = 'building-desc';
        desc.textContent = building.description;

        infoDiv.appendChild(title);
        infoDiv.appendChild(desc);

        header.appendChild(iconDiv);
        header.appendChild(infoDiv);

        return header;
    }

    /**
     * 创建现代化成本显示
     * @param {Object} cost - 成本对象
     * @returns {HTMLElement} 成本显示元素
     */
    static createCostDisplayModern(cost) {
        const container = document.createElement('div');
        container.className = 'cost-display';

        if (cost.wood !== undefined) {
            const woodItem = document.createElement('div');
            woodItem.className = 'cost-item';
            woodItem.innerHTML = `
                <div class="cost-icon" style="background: linear-gradient(135deg, #D97706, #B45309); box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);">
                    <i class="fa fa-tree" style="color: white;"></i>
                </div>
                <span>${cost.wood}</span>
            `;
            container.appendChild(woodItem);
        }

        if (cost.food !== undefined) {
            const foodItem = document.createElement('div');
            foodItem.className = 'cost-item';
            foodItem.innerHTML = `
                <div class="cost-icon" style="background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);">
                    <i class="fa fa-leaf" style="color: white;"></i>
                </div>
                <span>${cost.food}</span>
            `;
            container.appendChild(foodItem);
        }

        return container;
    }

    /**
     * 创建效率显示 - 现代化版本
     * @param {number} efficiency - 效率值
     * @returns {HTMLElement} 效率显示元素
     */
    static createEfficiencyDisplay(efficiency) {
        const container = document.createElement('div');
        container.style.marginBottom = '1rem';

        const efficiencyText = document.createElement('div');
        efficiencyText.style.cssText = 'font-size: 0.875rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;';

        const percentage = (efficiency * 100).toFixed(0);
        const color = efficiency >= 1.0 ? '#10B981' : '#EF4444';

        efficiencyText.innerHTML = `
            <span style="color: #CBD5E1;">效率</span>
            <span style="color: ${color}; font-weight: 600;">${percentage}%</span>
        `;

        const progressBar = document.createElement('div');
        progressBar.className = 'progress-bar-modern';

        const progressFill = document.createElement('div');
        progressFill.className = 'progress-fill-modern';
        progressFill.style.width = `${percentage}%`;

        progressBar.appendChild(progressFill);

        container.appendChild(efficiencyText);
        container.appendChild(progressBar);

        return container;
    }

    /**
     * 创建操作按钮 - 现代化版本
     * @param {Object} building - 建筑信息
     * @param {Function} onUpgrade - 升级回调
     * @param {Function} onUnlock - 解锁回调
     * @returns {HTMLElement} 按钮元素
     */
    static createActionButton(building, onUpgrade, onUnlock) {
        const button = document.createElement('button');
        button.className = 'btn-modern';
        button.style.width = '100%';

        if (building.unlocked) {
            // 升级按钮
            button.classList.add(building.canUpgrade ? 'btn-primary' : 'btn-disabled');
            button.disabled = !building.canUpgrade;
            button.innerHTML = '<i class="fa fa-arrow-up"></i><span>升级建筑</span>';

            if (building.canUpgrade) {
                button.addEventListener('click', () => onUpgrade(building.id));
            }
        } else {
            // 解锁按钮
            button.classList.add(building.canUnlock ? 'btn-secondary' : 'btn-disabled');
            button.disabled = !building.canUnlock;
            button.innerHTML = '<i class="fa fa-unlock"></i><span>解锁建筑</span>';

            if (building.canUnlock) {
                button.addEventListener('click', () => onUnlock(building.id));
            }
        }

        return button;
    }
}
